<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-dropdown trigger="click" @command="handleCommand">
        <el-button type="primary">
          {{ state.projectNames }}<el-icon class="el-icon--right"></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in state.selectList"
              :key="item.projectId"
              :command="item"
              >{{ item.projectName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-tabs
      v-model="state.activeName"
      class="demo-tabs"
      @tab-change="tabsChange"
    >
      <el-tab-pane label="基础信息" name="0">
        <el-form
          :model="formInline"
          ref="formInlineRef"
          class="demo-form-inline"
          label-width="120px"
          :disabled="true"
        >
          <div class="twoline">
            <el-form-item label="项目名称">
              <el-input
                v-model="formInline.projectName"
                placeholder="项目名称"
              />
            </el-form-item>
            <el-form-item label="项目地址">
              <el-input v-model="formInline.address" />
            </el-form-item>
          </div>
          <div class="twoline">
            <el-form-item label="项目编码">
              <el-input v-model="formInline.projectCode"> </el-input>
            </el-form-item>

            <el-form-item label="预计开始日期">
              <el-input v-model="formInline.predictStartTime"> </el-input>
            </el-form-item>
          </div>
          <div class="twoline">
            <el-form-item label="预计完成日期">
              <el-input v-model="formInline.predictEndTime"> </el-input>
            </el-form-item>

            <el-form-item label="项目分类">
              <el-input v-model="formInline.typeName"> </el-input>
            </el-form-item>
          </div>
          <div class="twoline">
            <el-form-item label="业务单元">
              <el-input v-model="formInline.businessUnit"> </el-input>
            </el-form-item>

            <el-form-item label="项目总额(万)">
              <el-input v-model="formInline.projectAmount"> </el-input>
            </el-form-item>
          </div>
          <div class="oneline">
            <el-form-item label="项目类型" class="oneline" prop="projects">
              <el-input v-model="formInline.projectAmount"> </el-input>
            </el-form-item>
          </div>

          <el-form-item label="项目摘要" class="oneline" prop="remark">
            <el-input
              v-model="formInline.projectSummary"
              show-word-limit
              type="textarea"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="会议信息" name="1">
        <tableIndex
          :tableData="state.tableData"
          :tableHead="state.tableHead"
          :isIndex="true"
          :height="'500'"
          :page="state.page"
          :not-search="true"
          @page-change="pageChange"
        >
          <template #operate>
            <el-table-column label="操作" align="center" fixed="right">
              <template #default="{ row }">
                <el-button
                  size="small"
                  class="update"
                  @click="lookItemHandler(row)"
                  type="primary"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </template>
        </tableIndex>
      </el-tab-pane>
    </el-tabs>

    <div style="text-align: center">
      <el-button size="small" class="update" @click="goback(row)" type="primary"
        >关闭</el-button
      >
    </div>
  </div>
</template>
<script setup>
import '@/views/constructionProjectManage/static/button.scss'
import tableIndex from '@/components/table/index.vue'
import { getURLhandler } from '@/views/constructionProjectManage/static/utools.js'

import { ref, reactive, onMounted, computed } from 'vue'
import { assetsApi } from '@/api/assets'
import { useRouter, useRoute } from 'vue-router'
import {
  projectApi,
  mettingApi,
  projectListApi,
  projectConfigApi
} from '@/api/project'

import {
  ElDialog,
  ElButton,
  ElTabPane,
  ElTabs,
  ElIcon,
  ElForm,
  ElDropdown,
  ElDropdownItem,
  ElFormItem,
  ElDropdownMenu
} from 'element-plus'
const state = reactive({
  activeName: '0',
  projectNames: '项目名称选择',
  page: {
    page: 1,
    pageSize: 10,
    total: 0
  },
  selectList: [],
  tableData: [],
  tableHead: [
    {
      prop: 'projectSetName',
      label: '会议名称'
    },
    {
      prop: 'departmentName',
      label: '会议类型'
    },
    {
      prop: 'streetName',
      label: '参会人员'
    },
    {
      prop: 'totalProjectAmount',
      label: '会议时间'
    },
    {
      prop: 'createTime',
      label: '会议结果'
    },
    {
      prop: 'createTime',
      label: '发起人'
    }
  ]
})

let formInlineRef = ref(null)
const formInline = reactive({})

//路由跳转
let router = useRouter()
let route = useRoute()

const pageChange = (e) => {
  state.page.page = e.page
  state.page.pageSize = e.limit

  getPage()
}

//返回列表页
const goback = () => {
  router.push({
    path: '/constructionProjectManage/preliminaryProject/index'
  })
}
//查看
const lookItemHandler = (row) => {}
//通过ID获取详情
const getByidHandler = async (id) => {
  await projectApi.getByidProjects(id).then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      state.selectList = data.projects
    }
  })
}

const handleCommand = async (e) => {
  state.projectNames = e.projectName
  await projectListApi.getprojectByid(e.projectId).then((res) => {
    console.log(res)
    const { code, data, msg } = res
    if (code == 200) {
      Object.assign(formInline, data)
    }
  })
}

const getAllList = async () => {
  await projectListApi.getAllList().then((res) => {
    if (res.code == 200) {
      console.log(res)
    }
  })
}
//tabs切换
const tabsChange = (e) => {
  if (state.activeName == 1) {
    getPage()
  }
}
//获取会议信息
const getPage = (e) => {
  mettingApi
    .getPage({
      pageNum: state.page.page,
      pageSize: state.page.pageSize,
      param: e
    })
    .then((res) => {
      if (res.code == 200) {
        state.tableData.value = res.data.content
        state.page.total = res.data.totalSize
      }
    })
}
defineExpose({
  state
})
onMounted(() => {
  if (getURLhandler(route.path).projectName) {
    handleCommand({
      projectName: getURLhandler(route.path).projectName,
      projectId: getURLhandler(route.path).projectId
    })
  } else {
    getByidHandler(getURLhandler(route.path).projectId)
  }
  getAllList()
})
</script>
<style lang="scss" scoped>
.el-select {
  width: 50%;
}
.select_project {
  width: 100%;
}
.buttons {
  text-align: center;
}
.twoline {
  display: flex;
  .el-form-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-select {
      width: 50%;
    }
  }

  justify-content: space-between;
}
.oneline {
  .el-form-item {
    width: 50%;
  }
}
.el-dropdown-menu {
  width: 200px;
}
</style>
